import React,{useState,useContext} from 'react'
import {Link} from 'react-router-dom';
import Header from '../../components/Header/Header'
import  {Button,Form,Input,Toast} from 'antd-mobile'
import { reqlogin } from "../../http/api";
import { MyContext } from "../../App";
import { actions } from "../../reducer/app";

 const Login = (props)=> {
   //初始化表单数据
   const [user,setUser] = useState({
     phone:'',
     password:'',
   });
   const {dispatch} = useContext(MyContext);
   //登录
   const doLogin = () =>{
     reqlogin(user).then((res)=>{
       if(res.data.code==200){
         //弹成功
         Toast.show({
           content:res.data.msg
         })
         //存数据
         dispatch(actions.changeUserInfo(res.data.list))
         //跳转页面
         props.history.push('/index/home')
       }
     })
   }
  return (
    <div>
      <Header register title="登录"></Header>
      {/* 2.数据绑定  */}
      {/* <div>user:{JSON.stringify(user)}</div> */}
      <Form layout="horizontal">
        <Form.Item label="手机号" name="username">
          <Input
            placeholder="请输入手机号"
            clearable
            onChange={(v) =>
              setUser({
                ...user,
                phone: v,
              })
            }
          />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input
            placeholder="请输入密码"
            clearable
            type="password"
            onChange={(v) =>
              setUser({
                ...user,
                password: v,
              })
            }
          />
        </Form.Item>
      </Form>
      <Button block size="large" color="primary" onClick={() => doLogin()}>
        登录
      </Button>
    </div>
  )
}

export default Login;
